<template>
	<view class="content">
		<view class="tag-wrap bg-white">
			<view class="tag-desc">
				颜色说明：
			</view>
			<view class="tag-content">
				<view class="cu-tag bg-red light">
					0次
				</view>
				<view class="cu-tag bg-orange light">
					1次
				</view>
				<view class="cu-tag bg-blue light">
					2次
				</view>
				<view class="cu-tag bg-green light">
					3次以上
				</view>
				<view class="cu-tag radius text-blue" @click="chooseDate">
					{{ queryDate }}
				</view>
				
			</view>
		</view>
		<Tree :dataList="list" @lastClick="col"></Tree>
		
		<wpickers
		    mode="date" 
		    startYear="2000" 
		    endYear="2050"
		    :current="true"
		    fields="month"
		    @confirm="onConfirm"
		    :disabled-after="true"
		    ref="datePicker" 
		></wpickers>
		
	</view>
</template>

<script>
	import Tree from "@/components/Tree/tree-pdtj.vue";
	import wpickers from "@/components/w-picker-v2/w-picker.vue"
	import {
		mapState,
		mapMutations
	} from "vuex";
	import api from "../../common/api.js";
	import util from "../../common/util.js";
	let _self,
		searchUrl,
		urlParams,
		types,
		queryJson = {};

	let requestData = {
		"page": 1,
		"rows": "50",
		"sidx": "",
		"sord": "",
		"queryJson": "",
		"TYPE": "",
		"BILLNO": "",
		"DATE": "2020-08",
		"userId": "",
		"account": ""
	};

	export default {
		computed: mapState(["userInfo"]),
		components: {
			Tree,
			wpickers
		},
		data() {
			return {
				list: [],
				storeList: [],
				keyword: '',
				keywordID: '',
				keywordR: 0 ,
				queryDate :''
			};
		},
		onBackPress() {
			uni.hideKeyboard();
		},

		onLoad(p) {
			_self = this;
			requestData.category = "BD_STORE";
			let Y = new Date().getFullYear() + '-' + (new Date().getMonth()+1) ;
			this.queryDate = Y ;
			console.log(Y);
			
			this.initData(this.userInfo.ORGANIZEID);
			uni.$on("lastClick", res => {
				console.log(res.item);
				if (res.item.r == 5) {
					return uni.navigateTo({
						url:'/pages/tab01/inventory/mater_list_tj?id='+res.item.id
					})
				};
				if(!res.item.o) return;
				// console.log(res.item.c.length);
				if (res.item.o && res.item.c.length == 0) {
					_self.addCDta(res.item);
				}
			});
		},
		onUnload() {
			uni.$off('lastClick')
		},
		onHide() {
			uni.$off('lastClick')
		},
		methods: {
			initData(p) {
				queryJson = {
					PK_ORG: p
				};
				requestData.queryJson = JSON.stringify(queryJson);
				requestData.userId = _self.userInfo.UserId;
				requestData.account = _self.userInfo.Account;
				requestData.TYPE = ''
				requestData.BILLNO = ''
				requestData.DATE = this.queryDate 
				// console.log(requestData);
				this.getList();
			},
			handelSearch() {
				let place = {
					name: this.keyword,
					id: this.keywordID,
					R: this.keywordR
				};
				// console.log(place);
				uni.$emit('updataPlace', place)
				uni.navigateBack();
			},
			
			chooseDate(){
				this.$refs.datePicker.show()
			},
			onConfirm(e){
				console.log(e);
			 this.queryDate	= e.result
			 requestData.DATE = this.queryDate
			 requestData.TYPE = ''
			 requestData.BILLNO = ''
			 this.list = []
			 this.getList();
			},
			
			getList(pArr) {
				let URL =  '/api/APPCommon//GetListPage_Count';
				// console.log(pArr);
				// console.log(requestData);
				this.axios({
					url: URL,
					data: requestData,
					isLoading: true
				}).then(res => {
					let {
						IsSuccess,
						Result
					} = res;
					// console.log(Result);
					let arr = Result.rows.map((i, index) => {
						let pid = pArr ? [...pArr, index] : [index];
						let ccn = _self.setNameToId(requestData.TYPE,'name') ;
						let cci = _self.setNameToId(requestData.TYPE,'id') ;
						let a = {
							id: i[cci] ,
							t: i[ccn],
							p: pid,
							r: pid.length,
							o: false,
							c: [],
							times: i.TIMES
						};
						return a;
					});
					if (pArr) {
						switch (pArr.length) {
							case 1:
								this.list[pArr[0]].c = arr;
								break;
							case 2:
								this.list[pArr[0]].c[pArr[1]] ?
									(this.list[pArr[0]].c[pArr[1]].c = arr) : [];
								break;
							case 3:
								this.list[pArr[0]].c[pArr[1]].c[pArr[2]].c = arr;
								break;
							case 4:
								this.list[pArr[0]].c[pArr[1]].c[pArr[2]].c[pArr[3]].c = arr;
								break;
							case 5:
								this.list[pArr[0]].c[pArr[1]].c[pArr[2]].c[pArr[2]].c[
									pArr[4]
								].c = arr;
								break;
						}
					} else {
						this.list = [...arr];
					}
				});
			},
			//点击最后一级时触发该事件
			mapdata(data) {
				let arr = data.map((i, index) => {
					let pid = [...index];
					let a = {
						id: i.BILLNO,
						t: i.VNAME, // title
						p: pid, // 父节点下标数组
						r: pid.length, //  层级
						c: [] // 子节点数组
					};
					return a;
				});
				this.list = arr;
			},
			col() {

			},
			
			// 根据层级，转译  节点名称
			setNameToId(qt, getType){
				
				if(qt=='' && getType=='name'){ // 默认为空时查询仓库
					return 'STORENAME';
				}else if(qt=='' && getType=='id'){
					return 'PK_STORE';
				}
				
				let cn = {
					"S":'HQNAME',
					0:'HJNAME',
					1:'HCNAME',
					2:'STATIONNAME',
					3:'bg-green',
				}
				let ci = {
					"S":'HQ',
					0:'HJ',
					1:'HC',
					2:'PK_STATION',
				}
				return getType=='name'? cn[qt] : ci[qt] ;
			},
			
			addCDta(item) {
				// console.log(item);
				// type S 仓库，0货区，1货架，2货层，3货位
				// requestData.category = "BD_RACK";
				switch (item.r) {
					case 1:
					  requestData.TYPE = 'S'
						requestData.BILLNO = item.id
						break;
					case 2:
						requestData.TYPE = '0'
						requestData.BILLNO = item.id
						break;
					case 3:
						requestData.TYPE = '1'
						requestData.BILLNO = item.id
						break;
					case 4:
						requestData.TYPE = '2'
						requestData.BILLNO = item.id
						break;
					default:
						requestData.TYPE = ''
						requestData.BILLNO = ''
						break;
				}
				// requestData.queryJson = JSON.stringify(queryJson);
				// console.log(requestData);
				this.getList(item.p);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.tag-wrap {
		padding: 20rpx;
		display: flex;
		align-items: center;
		.cu-tag{
			margin-right: 10rpx;
		}
	}
</style>
